<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="name" label="用户名称" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
            <template #default="scope">

                <el-button @click="chat(scope.row)" type="text" size="small">通话</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog width="90%" style="margin-left:10vw ;" v-model="centerDialogVisible" title="Chat" align-center
        @closed="closed" destroy-on-close :before-close="handleClose">
        <Pull v-if="show" :currentName="currentName" :toUserName="toUserName" :fromUserName="fromUserName"></Pull>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { videoStore } from '@/store/video'
import { SignalrStore } from '@/store/signalrStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pull from '@/components/Pull.vue'
var tableData = ref([]);
const centerDialogVisible = ref(false);
var currentName = ref();
var toUserName = ref();
var fromUserName = ref();
var show = ref(true);
var urlData = null;
const handleClose = (done) => {
    ElMessageBox.confirm('是否退出聊天?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
onMounted(async () => {
    try {
        var res = await fetch('/configjs.json?d=' + new Date());
        urlData = await res.json();
        var user = await fetch(urlData.apiUrl + "/GetUser");
        tableData.value = await user.json();
        var con = SignalrStore().getSignalrInstance();
        SignalrStore().getSignalrInstance().on("UserChange", (datas) => {
            if (datas && datas.length > 0) {
                tableData.value = datas
            }
            console.log(datas);
        });
        SignalrStore().getSignalrInstance().on("CloseChat", () => {

            show.value = false;
            centerDialogVisible.value = false;
        });
        SignalrStore().getSignalrInstance().on("NotityChat", (state) => {

            if (state == "fail") {
                show.value = false;
                centerDialogVisible.value = false;
                alert("对方已拒绝。");
            }
        });
        SignalrStore().getSignalrInstance().on("SingleChat", (current, to) => {
            ElMessageBox.confirm(
                '是否接受来自' + current + '的视频通话?',
                'Info',
                {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
            )
                .then(async () => {
                    currentName.value = to;
                    fromUserName = current;
                    show.value = true;
                    centerDialogVisible.value = true;

                    var res = await fetch(urlData.apiUrl + "/NotitySingleChat?FromName=" + current + "&ToName=" + to + "&State=success");
                })
                .catch(async () => {
                    show.value = false;
                    centerDialogVisible.value = false;
                    var res = await fetch(urlData.apiUrl + "/NotitySingleChat?FromName=" + current + "&ToName=" + to + "&State=fail");
                })
        });
    } catch (error) {
        console.error(error);
    }
})
const closed = async () => {
    var id = videoStore().getId();
    show.value = false;
    centerDialogVisible.value = false;
    var current = videoStore().getName();
    var res = await fetch(urlData.apiUrl + "/RemoveSingleChat?Name=" + current);
}
const chat = async (data) => {
    var current = videoStore().getName();
    if (current == data.name) {
        alert('不能和自己通话。')
        return;
    }
    show.value = true;
    var res = await fetch(urlData.apiUrl + "/IsSingleChat?Name=" + data.name);
    var is = await res.json();
    if (is) {
        alert(data.name + '正在进行通话。')
        return;
    }
    currentName.value = current;
    toUserName.value = data.name;
    centerDialogVisible.value = true;
}
</script>